<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>智能汽车详情</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js" charset="utf-8"></script>

    <style>
        body {
            background: #F7F7F7;
        }

        .top {
            width: 1220px;
            margin: 10px auto;
            zoom: 1;
        }

        .top-tul {
            width: 956px;
            float: left;
            margin: 0px;
            line-height: 0;

        }

        .top-tur {
            width: 224px;
            float: left;
            margin: 0;
            margin-left: 10px;
            line-height: 0;
        }

        .rige {
            position: relative;
            float: right;
            margin: 0px;
            padding: 0px;
        }

        .leg {
            position: relative;
            float: left;
            margin: 0px;
            padding: 0px;
        }

        .login h4 {
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }

        .login label {
            margin-right: 5px;
            color: #888;
            display: inline-block;
            width: 60px;
            text-align: right;
        }

        .login .input {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 10px 5px;
            width: 250px;
        }

        .login .item {
            margin: 20px auto;
            text-align: center;
        }

        .login .submit {
            background: #e40;
            border: 1px solid #e40;
            border-radius: 5px;
            padding: 10px 5px;
            width: 250px;
            color: #fff;
        }

        .login .error-msg {
            color: #e40;
        }

        #nr {
            width: 1200px;
            height: 500px;
        }

        #che {
            width: 580px;
            height: 580px;
            float: left;
            overflow: hidden;
        }

        #che2 {
            width: 580px;
            height: 600px;
            float: left;
            background: whitesmoke;
        }

        .jies {
            font-size: 25px;
            line-height: 1;
            font-weight: bold;
            color: #111e36;
        }

        .xin {
            margin-top: 14px;
        }

        .xinshan {
            border: 0px solid #e6ebf5;
            background: #FFFFFF;
            width: 50px;
            color: #666d7f;
            font-weight: bold;
            text-decoration: none;
            float: left;
        }

        .xinshan:hover {
            color: orangered;
            text-decoration: none;
        }

        .tanc {
            display: none;
            width: 120px;
            padding: 14px;
            background: #C4E3F3;
            border-radius: 4px;
            color: #000000;
            line-height: 10px;
            font-weight: normal;
            float: left;
            font-size: 14px;
            margin-top: 20px;
        }

        .caidan {
            margin-top: 80px;
            background: #F5F5F5;
            padding: 14px;
            border-radius: 10px 0;
            height: 80px;
            list-style: none;
        }

        .cd {
            width: 24%;
            text-align: center;
            float: left;
            box-sizing: border-box;
            border-right: 1px solid #E6E6E6;
        }

        .pp {
            padding-bottom: 6px;
            line-height: 1;
            font-size: 14px;
            text-align: left;
            color: #666D7F;
        }

        .hh {
            font-size: 16px;
            line-height: 1.2;
            font-weight: bold;
            width: 100%;
            height: 20px;
            text-align: left;
            color: #111E36;
        }

        .jiage {
            height: 70px;
            margin-top: 16px;
            margin-bottom: 9px;
        }

        .jiages {
            font-size: 36px;
            font-weight: bold;
            padding-right: 20px;
            margin-top: 8px;
            float: left;
            color: #F9712c;
        }

        .wan {
            font-size: 29px;
            vertical-align: 2px;
            margin-left: 4px;
            font-weight: bold;
        }

        .han {
            margin-left: 2px;
            font-size: 12px;
            color: #666D7F;
            border: 1px solid #E6EBF5;
            margin-top: 25px;
            border-radius: 4px 0 4px 0;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            padding: 0 6px;
        }

        .liaoji {
            padding: 15px 0;
            font-size: 14px;
            display: block;
            color: #111E36;
            background: whitesmoke;
            border-bottom: solid 1px #F8F8F8;
            border-top: solid 1px #FFFFFF;
            position: relative;
        }

        #gduo {
            display: block;
            width: 100%;
            height: 18px;
            position: relative;
            text-decoration: none;
        }

        .guazi {
            font-size: 12px;
            color: #666D7F;
        }

        .buss {
            background: #fe4a3b;
            height: 18px;
            line-height: 18px;
            padding: 0 4px;
            border-radius: 4px 0 4px 0;
            font-size: 12px;
            color: #FFFFFF;
            margin-right: 10px;
            display: inline-block;
        }

        .gaojia {
            display: inline-block;
            margin-right: 10px;
            font-size: 14px;
            color: #111E36;
            font-weight: bold;
        }

        .busines {
            padding: 15px 0;
            font-size: 14px;
            color: #111E36;
            display: block;
            background: whitesmoke;
            border-bottom: solid 1px #F8F8F8;
            border-top: solid 1px #FFFFFF;
            position: relative;
        }


        .kan {
            margin-top: 30px;
        }

        .baokan {
            margin-right: 20px;
            padding: 0 70px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            position: relative;
            min-width: 110px;
            font-weight: bold;
            border-radius: 4px;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            background-color: #F9712C;
            color: #FFFFFF;
            border-width: 1px;
            border-style: solid;
            border-color: #F9712C;
            text-decoration: none;

        }

        .baokan:hover {
            text-decoration: none;
            color: red;
        }

        .chakan {
            margin-right: 20px;
            padding: 0 70px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            position: relative;
            color: #111E36;
            min-width: 110px;
            font-weight: bold;
            background-color: #FFFFFF;
            border-color: #E6E6E6;
            border-radius: 4px;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            border-width: 1px;
            border-style: solid;
            text-decoration: none;
        }

        .chakan:hover {
            text-decoration: none;
            color: red;
        }

        .chedan {
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            zoom: 1;
        }

        .clian {
            line-height: 1;
            font-size: 28px;
            font-weight: bold;
            color: #111E36;
            padding: 50px 0 30px;
        }

        .ans {
            padding: 50px 0;
            height: 280px;
            box-sizing: border-box;
            border: 1px solid #E6E6E6;
            z-index: 3;
            zoom: 1;
        }

        .klls {
            width: 398px;
            float: left;
            box-sizing: border-box;
            overflow: hidden;
            list-style: none;
        }

        .lis {
            line-height: 1;
            font-size: 14px;
            color: #1b1b1b;
        }

        .uis {
            width: 80px;
            display: inline-block;
            color: #999999;
            position: relative;
            line-height: 1;
            font-size: 14px;
            margin-top: 20px;
        }

        .sssd {
            width: 1300px;
            margin: 0 auto;

        }

        .chetu {
            line-height: 1;
            font-size: 28px;
            font-weight: bold;
            color: #111E36;
            padding: 50px 0 30px;
        }

        /*车的图片样式修改宽度等*/
        .ctupian {
            width: 590px;
            height: 440px;
            display: inline-block;
            margin-bottom: 20px;
            text-decoration: none;
            margin-right: 20px;
        }

        .yjiaoys {
            background-color: #4a4a4a;
            width: 100%;
        }

        .fools {
            width: 1200px;
            padding: 44px 0 40px;
            margin: 0 auto;
            overflow: hidden;
        }

        .frist {
            padding-right: 35px;
            width: 195px;
            float: left;
            height: 111px;
        }


        .frist dd {
            margin-left: 36px;

        }

        .frist dt {
            width: 26px;
            height: 26px;
            float: left;
            line-height: 30px;
        }


        .frist dd h5 {
            font-size: 18px;
            line-height: 15px;
            margin-bottom: 6px;
            color: #FFFFFF;
            font-weight: 500;
        }

        .dss {
            color: #999999;
            display: block;
            font-size: 14px;
            line-height: 25px;
            text-decoration: none;
            outline: none;

        }

        .dss:hover {
            color: #F9712C;
            text-decoration: none;
        }

        #imgList img{
            width: 550px;
            height: 440px;
        }

        #imgList2 img{
            width: 600px;
            height: 450px;
        }

        .msg{
            height: 200px;
        }

        #message{
            font-size: 18px;
            font-family: 微软雅黑;

        }

        #rightBack{
            height: 100%;
            width: 40px;
            position: fixed;
            right: 0px;
            top: 0px;
            text-align: center;
            background-color: #4a4a4a;
        }

        #rightBack div{
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }

        #rightBack div i{
            display: inline-block;
            margin: 10px 0px;
        }

    </style>
</head>
<body>
<!--
    头图片
-->
<div id="top" class="top container">
    <div class="leg">
        <div id="top-tulef" class="top-tul">
            <a href="dian.html">
                <img src="img/wKgHzFhrgWiAcvaSAADZL9a3Sj8498.jpg" alt=""/>
            </a>
        </div>
    </div>

    <div class="rige">
        <div id="top-turight" class="top-tur">
            <a href="#">
                <img src="img/ChsEj15cvQqAWvtBAAAQ_Kf_Cxo828.jpg" alt=""/>
            </a>
        </div>
    </div>
</div>


<div id="rightBack">

    <div>
        <i class="layui-icon layui-icon-return" style="font-size: 22px; color: white;" id="i1"></i>
        <i class="layui-icon layui-icon-cellphone-fine" style="font-size: 22px; color: white;" id="i2"></i>
    </div>

</div>


<!--
主要内容：汽车价格等
-->

<div class="container" id="nr">

    <div class="layui-row layui-form-item ">

        <!--
        车的轮播图
        -->
        <div class="che" id="che">
            <div class="layui-carousel" id="test10" style="display: inline-block;">
                <div carousel-item="" id="imgList">

                </div>
            </div>
        </div>

        <!--
        车的价格详细内容
        -->
        <div class="che2" id="che2">
            <h3 class="jies" id="title">

            </h3>
            <div class="xin" id="xin">

                <a href="" class="xinshan">上架</a>
                <div class="tanc" id="tanc"></div>

            </div>

            <ul class="caidan">
                <li>
                    <span class="cd">
                        <p class="pp">座位数</p>
                        <h4 class="hh" id="num"></h4>
                    </span>
                </li>
                <li>
                    <span class="cd">
                        <p class="pp">电池容量</p>
                        <h4 class="hh" id="capacity"></h4>
                    </span>
                </li>
                <li>
                     <span class="cd">
                        <p class="pp">最高车速</p>
                        <h4 class="hh" id="maxSpeed"></h4>
                    </span>
                </li>
                <li>
                    <span class="cd">
                        <p class="pp">直流快充时间</p>
                        <h4 class="hh" id="time"></h4>
                    </span>
                </li>

            </ul>
            <div class="jiage">

                <span class="jiages" id="money"></span>
            </div>
            <div class="liaoji">
                <a id="gduo" href="#">
                    <span class="guazi" id="guazi">
                    <i class="buss" id="buss">智能汽车</i>
                    <b class="gaojia" id="gaojia">高价卖旧车，领取万元置换补贴</b>
                    用你的旧车置换当前车俩
                </span>
                </a>
            </div>

            <div class="busines">

            </div>
            <div class="kan">
                <a class="baokan" id="baokan" href="#">我要预约</a>
                <i class="layui-icon layui-icon-star " id="collect" style="font-size: 30px; color: #1E9FFF;"></i>
            </div>
        </div>
    </div>

</div>

<div class="chedan msg">

    <h3 class="clian">简介</h3>

    <span id="message"></span>

</div>


<div class="chedan">
    <h3 class="clian">车辆档案</h3>
    <div class="ans">
        <ul class="klls">

            <li class="lis">
                <span class="uis">座位数</span>
                <span id="num2"></span>
            </li>
            <li class="lis">
                <span class="uis">驱动形式</span>
                <span id="driving"></span>
            </li>
            <li class="lis">
                <span class="uis">电机类型</span>
                <span id="motor"></span>
            </li>
            <li class="lis">
                <span class="uis">电池类型</span>
                <span id="cell"></span>
            </li>
        </ul>


        <ul class="klls">

            <li class="lis">
                <span class="uis">电池容量</span>
                <span id="capacity2"></span>
            </li>
            <li class="lis">
                <span class="uis">直流快充时间(30%->80%)</span>
                <span id="time1"></span>
            </li>
            <li class="lis">
                <span class="uis">交流慢充时间(30%->80%)</span>
                <span id="time2"></span>
            </li>
        </ul>


        <ul class="klls">

            <li class="lis">
                <span class="uis">最高车速</span>
                <span id="maxSpeed2"></span>
            </li>
            <li class="lis">
                <span class="uis">发布时间</span>
                <span id="date"></span>
            </li>
        </ul>
    </div>
    <!--
   车辆图片
    -->

    <div class="sssd">
        <h4 class="chetu">车辆图片</h4>
        <!--
            车辆图片
        -->
        <div class="tu" id="imgList2">

        </div>
    </div>

    <!--
        页脚介绍等
    -->
    <div class="yjiaoys">
        <div class="fools">
            <dl class="frist">
                <dt>
                    <i>
                        <img src="img/home.png"/>
                    </i>
                </dt>
                <dd>
                    <h5>关于我们</h5>
                    <a href="javascript:void(0)" class="dss">关于汽车</a>
                    <a href="javascript:void(0)" class="dss">联系我们</a>
                    <a href="javascript:void(0)" class="dss">门店位置</a>
                </dd>
            </dl>
            <dl class="frist">
                <dt>
                    <i class="tuss">
                        <img src="img/指南 .png"/>
                    </i>
                </dt>
                <dd>
                    <h5>交易指南</h5>
                    <a href="javascript:void(0)" class="dss">如何过户</a>
                    <a href="javascript:void(0)" class="dss">如何卖车</a>
                    <a href="javascript:void(0)" class="dss">如何买车</a>
                    <a href="javascript:void(0)" class="dss">注意事项</a>
                </dd>
            </dl>
            <dl class="frist">
                <dt>
                    <i>
                        <img src="img/安全.png"/>
                    </i>
                </dt>
                <dd>
                    <h5>交易安全</h5>
                    <a href="javascript:void(0)" class="dss">新手上路</a>
                    <a href="javascript:void(0)" class="dss">合同范本</a>
                    <a href="javascript:void(0)" class="dss">防止诈骗</a>
                    <a href="javascript:void(0)" class="dss">如何辨车</a>
                </dd>
            </dl>


            <dl class="frist">
                <dt>
                    <i>
                        <img src="img/工具.png"/>
                    </i>
                </dt>
                <dd>
                    <h5>常用工具</h5>
                    <a href="javascript:void(0)" class="dss">二手车估价</a>
                    <a href="javascript:void(0)" class="dss">维修保养记录</a>
                    <a href="javascript:void(0)" class="dss">各地排放标准</a>
                    <a href="javascript:void(0)" class="dss">车的类型</a>
                </dd>
            </dl>

            <dl class="frist">
                <dt>
                    <i>
                        <img src="img/商家服务.png"/>
                    </i>
                </dt>
                <dd>
                    <h5>商家服务</h5>
                    <a href="javascript:void(0)" class="dss">申请商家</a>
                    <a href="javascript:void(0)" class="dss">发布汽车</a>
                    <a href="javascript:void(0)" class="dss">车质检</a>

                </dd>
            </dl>

            <dl class="frist">
                <dt>
                    <i>
                        <img src="img/小e答疑.png"/>
                    </i>
                </dt>
                <dd>
                    <h5>答疑解惑</h5>
                    <a href="javascript:void(0)" class="dss">建议与投诉</a>
                    <a href="javascript:void(0)" class="dss">法律声明</a>
                    <a href="javascript:void(0)" class="dss">隐私政策</a>
                    <a href="javascript:void(0)" class="dss">营业执照</a>
                </dd>
            </dl>
        </div>
    </div>
</div>


<script>


    /*
     * 读取参数的值
     */
    function getParameter(name){
        var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");
        var r = location.search.substr(1).match(reg);
        if(r!=null) return (r[2]);
        return null;
    }

    //时间初始化
    function showTime(time){
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        return year+'年'+month+'月';
    }

    var user = null;

    function logined(backCall){
        if(user == null){
            $.post("user/findUser",{},function(data){
                if(data.phone==null){
                    window.location.href = "login.html";
                }else{
                    user = data;
                    backCall();
                }
            });
        }else{
            backCall();
        }


    }


    layui.use(['carousel', 'form'], function() {
        var carousel = layui.carousel
            , form = layui.form
            , $ = layui.jquery;


        $("#i1").click(function(){
            window.location.href = "index03.html";
        })

        var tips1;
        $("#i1").hover(
            function() {
                tips1 = layer.tips('返回主页', '#i1', {
                    tips: [1, '#555555']
                    // 上右下左四个方向，通过1-4进行方向设定
                });
            },function(){
                layer.close(tips1);
            }
        );

        var tips2;
        $("#i2").hover(
            function() {
                tips2 = layer.tips('免费咨询：189-9999-9999', '#i2', {
                    tips: [1, '#555555']
                    // 上右下左四个方向，通过1-4进行方向设定
                });
            },function(){
                layer.close(tips2);
            }
        );

        $.ajax({
            url:"smart/findCollect",
            contentType:"application/json;charset=UTF-8",
            data:getParameter("id"),
            type: "post",
            dateType:"json",
            success:function(data){
                if(data==1){
                    $("#collect").addClass('layui-icon-star-fill');
                }
            }
        })

        $("#collect").click(function () {
            $.ajax({
                url:"smart/taggleCollect",
                contentType:"application/json;charset=UTF-8",
                data:getParameter("id"),
                type: "post",
                dateType:"json",
                success:function(data){
                    if(data==1){
                        $("#collect").addClass('layui-icon-star-fill');
                        layer.msg('已收藏');
                    }else if(data==0){
                        $("#collect").removeClass('layui-icon-star-fill');
                        layer.msg('取消收藏');
                    }else if(data==-1){
                        window.location.href = "login.html";
                    }
                }
            })

        })

        $.ajax({
            url:"smart/message",
            contentType:"application/json;chartset=UTF-8",
            data:getParameter("id"),
            type:"post",
            dataType:"json",
            success: function(data){
                if(data!=null||data!=undefined){
                    for(var i = 0;i<data.imgs.length;i++){
                        $("#imgList").append('<div><img src="'+data.imgs[i].path+'" /></div>')
                        $("#imgList2").append('<a class="ctupian" href="#">\n' +
                            '                     <img src="'+data.imgs[i].path+'"/>\n' +
                            '                 </a>');
                    }

                    //图片轮播
                    carousel.render({
                        elem: '#test10'
                        ,width: '550px'
                        ,height: '440px'
                        ,interval: 5000
                    });

                    $("#title").html(data.title);

                    $("#num").html(data.num);

                    $("#driving").html(data.driving);

                    $("#motor").html(data.motor);

                    $("#cell").html(data.cell);

                    $("#money").html("￥ "+data.money +" 元");

                    $("#capacity").html(data.capacity+"（kwh）");

                    $("#time1").html("<="+data.time1+"（min）");

                    $("#time2").html("<="+data.time2+"（h）");

                    $("#maxSpeed").html(data.maxSpeed+"（h/km）");

                    $("#maxSpeed2").html(data.maxSpeed+"（h/km）");

                    $("#capacity2").html(data.capacity+"（kwh）");

                    $("#num2").html(data.num);

                    $("#tanc").html(showTime(data.date));

                    $("#time").html("<="+data.time1+"（min）");

                    $("#date").html(showTime(data.date));

                    $("#message").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+data.message);

                    $("#baokan,#cakan").click(function(){
                        logined(function(){
                            layer.alert(('（由于智能汽车目前没有切实的汽车相关信息，因此只能通过电话进行预约）：官方联系电话：'+data.user.phone), {icon: 1});
                        });

                    })
                    

                }
            }
        })



        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });


        //新上鼠标经过
        var xin = document.getElementById("xin");
        var tanc = document.getElementById("tanc");

        xin.onmousemove = function () {
            tanc.style.display = 'block';
        }
        xin.onmouseout = function () {
            tanc.style.display = 'none';
        }

        var buss = document.getElementById("buss");
        var gaojia = document.getElementById("gaojia");
        var guazi = document.getElementById("guazi");

        buss.onmousemove = function () {
            gaojia.style.color = '#F9712c';
            guazi.style.color = '#F9712c';
        }
        buss.onmouseout = function () {
            gaojia.style.color = '#111E36';
            guazi.style.color = '#111e36';
        }

    });

</script>
</body>
</html>
